<template>
  <div id="weeklyPlanFrom">
    <h3>周计划申请表</h3>
    <div class="weeklyPlanFromSelect">
      <span class="monthlyPlanFromSelectTitle">施工单位</span>
      <el-input
        disabled
        v-model="userInfo.companyOrgName"
        style="width: 200px; margin-right: 15px"
      >
      </el-input>
      <span class="monthlyPlanFromSelectTitle">申报人</span>
      <el-input
        disabled
        v-model="userInfo.name"
        style="width: 200px"
      >
      </el-input>
      <el-button
        type="primary"
        @click="addFund()"
        style="margin-left: 1rem"
        >新增</el-button
      >
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        label="作业日期"
        fixed
        width="250"
      >
        <template slot-scope="scope">
          <div
            class="block"
            style="width: 80%"
          >
            <el-date-picker
              v-model="scope.row.workDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="作业人数"
        width="150"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.workPersonNum"
            placeholder="请输入内容"
            resize="none"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="作业时间"
        width="250"
      >
        <template slot-scope="scope">
          <el-time-picker
            v-model="scope.row.workTimeStart"
            :picker-options="{
              selectableRange: '00:00:01 - 23:59:59',
            }"
            placeholder="选择时间"
            value-format="HH:mm:ss"
          >
          </el-time-picker>

          <el-time-picker
            v-model="scope.row.workTimeEnd"
            :picker-options="{
              selectableRange: '00:00:01 - 23:59:59',
            }"
            placeholder="选择时间"
            value-format="HH:mm:ss"
          >
          </el-time-picker>
        </template>
      </el-table-column>
      <el-table-column
        label="作业区域"
        width="200"
      >
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.workLineType"
            placeholder="请选择"
          >
            <el-option
              label="左右线"
              :value="0"
            >
            </el-option>
            <el-option
              label="左线"
              :value="1"
            >
            </el-option>
            <el-option
              label="右线"
              :value="2"
            >
            </el-option>
          </el-select>
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入工作区域"
            resize="none"
            v-model="scope.row.workRegion"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="作业内容"
        width="200"
      >
        <template slot-scope="scope">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            resize="none"
            v-model="scope.row.workContent"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="是否开行工程车"
        width="200"
      >
        <template slot-scope="scope">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            resize="none"
            v-model="scope.row.sfkxgcc"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="轻型车辆或梯车等"
        width="200"
      >
        <template slot-scope="scope">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            resize="none"
            v-model="scope.row.qxcl"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="停、送电需求"
        width="200"
      >
        <template slot-scope="scope">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            resize="none"
            v-model="scope.row.tsdxq"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="停送电范围"
        width="200"
      >
        <template slot-scope="scope">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            resize="none"
            v-model="scope.row.tsdfw"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="现场安全员"
        width="200"
      >
        <template slot-scope="scope">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            resize="none"
            v-model="scope.row.xcaqy"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="现场负责人"
        width="200"
      >
        <template slot-scope="scope">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            resize="none"
            v-model="scope.row.xcfzr"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="是否动火"
        width="200"
      >
        <template slot-scope="scope">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            resize="none"
            v-model="scope.row.sfdh"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="removeFundBtn(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="saveBtn">
      <el-button
        type="primary"
        @click="submit()"
        style="margin-left: 1rem"
        >保存并提交审批</el-button
      >
      <el-button
        type="primary"
        @click="sendKey(1)"
        style="margin-left: 1rem"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
import { weekPlanSaveAndSubmit } from '/src/http/productSchedule/weekPlan.js'

export default {
  props: ['getKey'],
  data() {
    return {
      tableData: [
        {
          workDate: '',
          workTimeStart: '',
          workTimeEnd: '',
          workPersonNum: '',
          workContent: '',
          workLineType: '',
          workRegion: '',
          sfkxgcc: '',
          qxcl: '',
          tsdxq: '',
          tsdfw: '',
          xcaqy: '',
          xcfzr: '',
          sfdh: '',
        },
      ],
      userInfo: this.$store.state.userInfo,
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    removeFundBtn(params) {
      this.tableData = this.tableData.filter((ele) => {
        var flag = false

        for (const key in params) {
          if (ele[key] != params[key]) {
            flag = true
            break
          }
        }
        return flag
      })

      if (!this.tableData.length) {
        this.addFund()
      }
    },

    addFund() {
      const newLine = {
        workDate: '',
        workTimeStart: '',
        workTimeEnd: '',
        workPersonNum: '',
        workContent: '',
        workLineType: '',
        workRegion: '',
        sfkxgcc: '',
        qxcl: '',
        tsdxq: '',
        tsdfw: '',
        xcaqy: '',
        xcfzr: '',
        sfdh: '',
      }

      this.tableData.push(newLine)
    },
    sendKey(num) {
      this.getKey(num)
    },
    async submit() {
      console.log(this.tableData)
      try {
        await weekPlanSaveAndSubmit({ details: this.tableData }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '提交成功!',
            })
            this.sendKey(1)
          }
        })
      } catch (error) {
        console.log('接口调用出错::: ', error)
      }
    },
  },
}
</script>
<style lang="less">
#weeklyPlanFrom {
  h3 {
    text-align: center;
    color: rgb(24, 144, 255);
    font-size: 20px;
  }
  .weeklyPlanFromSelect {
    width: 60%;

    margin: 2rem auto;
    .weeklyPlanFromSelectTitle {
      margin-right: 2rem;
    }
  }
}
</style>
